<template>
  <div class="app">
    <div class="magnifier-wrapper">
      <!-- <Magnifier
        :imgUrl="imgUrl"
        :imgAlt="imgAlt"
        :blank="blank"
        :link="link"
        :imgWidth="imgWidth"
        :imgHeight="imgHeight"
        :magWidth="magWidth"
        :magHeight="magHeight"
      /> -->

      <Stars
        :num="3"
        :size="30"
        @getStarNum="getStarNum"
      />
    </div>

    <!-- <Modal
      :show="true"
      :width="350"
      :borderRadius="10"
      headerColor="#007bff"
      headerText="This is a SUPER MODAL"
      headerTextColor="#fff"
      contentText=""
      contentTextColor="#333"
      position="center"
      :btnGroupShow="true"
      confirmText="是"
      cancelText="否"
      @confirm="modalConfirm"
      @close="modalClose"
    >
      <template #header></template>
      <template #content>
        <div class="a-content" >
          啊哈哈哈哈哈哈
        </div>
      </template>
    </Modal> -->

    <!-- <div class="select-wraper">
      <Selector
        placeholder="请选择框架"
        :data="selectorData"
        @setItemValue="setItemValue"
      ></Selector>
    </div> -->

    <!-- <div class="side-bar">
      <tree-menu>
        <template v-for="item of menuData">
          <menu-item
            v-if="!item.children"
            :key="item.id"
          >
            <a href="javascript:;">{{ item.title }}</a>
          </menu-item> -->
          <!-- 只有二级菜单时 -->
          <!-- <sub-menu v-else :key="(item.id)">
            <template #title>{{ item.title }}</template>
            <menu-item v-for="c of item.children" :key="c.id">
              {{ c.title }}
            </menu-item>
          </sub-menu> -->
          <!-- 多级菜单时 -->
          <!-- <re-sub-menu
            :data="item"
            :key="(item.id)"
            v-else
          ></re-sub-menu>
        </template>
      </tree-menu>
    </div> -->

    <!-- <div class="container">
      <div class="carousel-wrapper">
        <carousel
          :autoplay="true"
          :duration="3000"
          :initial="0"
          :hasDot="true"
          :hasDirector="true"
          dotBgColor="#ea3027"
        >
          <car-item
            v-for="(item, index) of carData"
            :key="index"
          >
            <img :src="require(`./assets/img/${ item.img_name }`)" />
            <p>第 {{index + 1}} 张图</p>
          </car-item>
        </carousel>
      </div>
    </div> -->
  </div>
</template>

<script>
import carData from '@/configs/carousel';
import menuData from '@/configs/sideMenu';
import selectorData from '@/configs/selector';

import { reactive, toRefs } from 'vue';

export default {
  name: 'App',
  setup(props) {
    const state = reactive({
      imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F191001191P2F49-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651904291&t=ad2eca47132bc021f4970fc326b80d48',
      imgAlt: '景色图片',
      blank: true,
      link: 'https://www.baidu.com',
      imgWidth: 500,
      imgHeight: 375,
      magWidth: 100,
      magHeight: 100
    })

    const getStarNum = (num) => {
      console.log(num);
    }

    const setItemValue = (value) => {
      console.log(value);
    }

    const modalConfirm = () => {
      console.log('modalConfirm');
    }

    const modalClose = () => {
      console.log('modalClose');
    }

    return {
      ...toRefs(state),
      getStarNum,
      setItemValue,
      modalConfirm,
      modalClose,
      carData,
      menuData,
      selectorData
    }
  }
}
</script>

<style lang="scss" scoped>
  .magnifier-wrapper {
    width: 500px;
    margin: 100px auto;
  }
  .select-wraper {
    width: 500px;
    margin: 200px auto;
  }
  .side-bar {
    width: 300px;
  }

  .container {
    margin-top: 400px;
    .carousel-wrapper {
      width: 300px;
      height: 280px;
      margin: 0 auto;
    }
  }

</style>
